<template>
    <div class="home" v-infinite-scroll="load">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <div class="flex">
                    <MyUpload></MyUpload>
                    <div class="top-btn">
                        <el-button round type="success" size="medium" @click="addNewFolder">新建文件夹</el-button>
                    </div>
                </div>
                <div>
                    <el-input placeholder="查找文件" v-model="searchContent" prefix-icon="el-icon-search"
                        @keyup.enter.native="search" clearable></el-input>
                </div>
            </div>
            <div class="text item">
                <div class="bread">
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item v-for="item, index in breadList" :key="index">
                            <span @click="toFolder(item.id)">{{ item.filename }}</span>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-table :data="fileList" style="width: 100%" @cell-mouse-enter="handleRowMouseEnter"
                    @cell-mouse-leave="handleRowMouseLeave" v-loading="isLoading" element-loading-text="拼命加载中">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="文件名">
                        <template slot-scope="scope">
                            <div class="filename" v-show="!scope.row.isEdit">
                                <MyFileImg :filename="scope.row.fileType" :folder="scope.row.folderType" size="32">
                                </MyFileImg>
                                <div>
                                    <el-link :underline="false" @click="openFile(scope.row)" class="ellipsis">{{
                                        scope.row.filename
                                    }}</el-link>
                                </div>
                            </div>
                            <div v-show="scope.row.isEdit">
                                <el-input v-model="scope.row.filename" placeholder="输入文件夹名称"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <div v-if="scope.row.show && !scope.row.isEdit" class="table-more">
                                <div class="table-more-item">
                                    <el-tooltip class="item" effect="dark" content="添加关键词" placement="top">
                                        <i class="el-icon-star-off" @click="addTag(scope.row.id)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item" v-show="scope.row.publicType == 1">
                                    <el-tooltip class="item" effect="dark" content="设为公共文件" placement="top">
                                        <i class="el-icon-document-copy" @click="setPublicFile(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item">
                                    <el-tooltip class="item" effect="dark" content="分享" placement="top">
                                        <i class="el-icon-share" @click="showShare(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item" v-show="scope.row.folderType == 1">
                                    <el-tooltip class="item" effect="dark" content="下载" placement="top">
                                        <i class="el-icon-download" @click="download(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item">
                                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                        <i class="el-icon-delete" @click="deleteFile(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item">
                                    <el-tooltip class="item" effect="dark" content="重命名" placement="top">
                                        <i class="el-icon-edit" @click="fileRename(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                                <div class="table-more-item">
                                    <el-tooltip class="item" effect="dark" content="移动" placement="top">
                                        <i class="el-icon-rank" @click="move(scope.row)"></i>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div v-if="scope.row.isEdit">
                                <el-button size="mini" type="primary" @click="submitAddNewFolder(scope.row)">确定</el-button>
                                <el-button size="mini" type="danger" @click="cancelAddNewFolder(scope.row)">取消</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="上传时间" width="200">
                    </el-table-column>
                    <el-table-column label="大小" width="150">
                        <template slot-scope="scope">
                            {{ $global.getSize(scope.row.fileSize) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-dialog :visible.sync="isShow" width="60%" class="dialog">
            <Preview :file="showFile"></Preview>
        </el-dialog>
        <el-dialog :visible.sync="isShare" width="30%" class="dialog" title="分享" :before-close="handleClose">
            <MyShareFile :file="shareFile"></MyShareFile>
        </el-dialog>
        <el-dialog :visible.sync="isMove" title="选择文件夹">
            <MoveFile :file="moveFile" :t="t" :type="1"></MoveFile>
        </el-dialog>
        <el-dialog :visible.sync="isAddTag" title="文件标签" width="30%">
            <div class="flex just">
                <el-select v-model="fileTagList" multiple filterable allow-create default-first-option
                    placeholder="请输入文件标签"></el-select>
                <el-button type="primary" @click="saveFileTag">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import MyUpload from "@/components/my-upload"
import MyFileImg from "@/components/my-file-img"
import Preview from "@/components/preview"
import MyShareFile from '@/components/my-share-file'
import MoveFile from '@/components/move-file'

export default {
    name: "home",
    components: {
        MyUpload,
        MyFileImg,
        Preview,
        MyShareFile,
        MoveFile
    },
    data() {
        return {
            pageSize: 10,
            currPage: 1,
            totalPage: 1,
            isLoading: false,
            // 文件列表
            fileList: [],
            // 标记是否首次进入页面
            flag: true,
            // 编辑的文件名
            editFilename: null,
            // 搜索内容
            searchContent: null,
            // 面包屑数据
            breadList: [
                {
                    filename: "全部",
                    id: -1
                }
            ],
            // 是否展示doc、ppt等文档
            isShow: false,
            // 展示的文件
            showFile: null,
            // 是否展示分享
            isShare: false,
            // 分享的文件
            shareFile: null,
            // 是否移动
            isMove: false,
            // 移动的文件
            moveFile: null,
            // 时间戳
            t: null,
            // 是否展示添加关键词
            isAddTag: false,
            // 添加文件标签的文件ID
            addTagFileId: null,
            // 文件标签
            fileTagList: [],
        }
    },
    mounted() {
        this.getFolderList()
        this.$bus.$on("refreshFileList", () => {
            this.clearFileList()
            this.getFolderList()

            // 借助这个刷新顺便关闭移动页面
            this.isMove = false
        })
    },
    methods: {
        handleRowMouseEnter(row) {
            // 在鼠标进入行时，隐藏该行的信息列
            row.show = true;
        },
        handleRowMouseLeave(row) {
            // 在鼠标离开行时，显示该行的信息列
            row.show = false;
        },
        async getFolderList() {
            this.isLoading = true
            var path = this.$route.query.path;
            let res = await this.$store.dispatch('getFolderFile', {
                pId: path == null ? 0 : path.substring(path.lastIndexOf("/") + 1, path.length),
                category: this.$route.query.category,
                limit: this.pageSize,
                page: this.currPage,
                key: this.searchContent,
                status: 1
            })
            this.isLoading = false
            if (!res.success) {
                this.$global.resError(res)
            }
            else {
                res.data.list.forEach(item => {
                    item.show = false;
                    item.isEdit = false;
                });
                this.fileList = this.fileList.concat(res.data.list)
                this.totalPage = res.data.totalPage
                this.currPage++;
            }
        },
        addNewFolder() {
            this.fileList.unshift({
                filename: "",
                createTime: null,
                fileSize: null,
                isEdit: true,
                id: -1
            })
        },
        cancelAddNewFolder(item) {
            if (item.id == -1) this.fileList.shift()
            else {
                item.isEdit = false;
                item.filename = this.editFilename;
            }
        },
        async submitAddNewFolder(item) {
            var path = this.$route.query.path;
            let res = await this.$store.dispatch("saveFolder", {
                folderId: path == null ? 0 : path.substring(path.lastIndexOf("/") + 1, path.length),
                filename: item.filename,
                id: item.id,
                status: item.status
            })
            if (res.success) {
                this.$message.success(res.message)
                this.clearFileList()
                this.getFolderList()
            }
            else this.$global.resError(res)
        },
        // 删除文件
        async deleteFile(item) {
            var path = this.$route.query.path;
            let res = await this.$store.dispatch("saveFolder", {
                folderId: path == null ? 0 : path.substring(path.lastIndexOf("/") + 1, path.length),
                filename: item.filename,
                id: item.id,
                status: 2
            })
            if (res.success) {
                this.$message.success(res.message)
                this.clearFileList()
                this.getFolderList()
            }
            else this.$global.resError(res)
        },
        openFile(item) {
            // 如果是文件夹
            if (item.folderType == 2) {
                this.$router.push({
                    path: this.$route.path,
                    query: {
                        category: this.$route.query.category,
                        path: (this.$route.query.path == null ? '' : this.$route.query.path) + "/" + item.id,
                    }
                })
                // 加入面包屑
                this.breadList.push(item)
            }
            else {
                this.showFile = item
                this.isShow = true
            }

        },
        search() {
            this.clearFileList()
            this.getFolderList()
        },
        load() {
            if (this.flag) {
                // 首次进入页面，不请求
                this.flag = false;
                return;
            }
            if (this.currPage > this.totalPage && !this.isLoading) return;
            this.getFolderList()
        },
        clearFileList() {
            // 当不是第一页的时候设置标志，防止二次刷新
            if (this.currPage > 1) this.flag = true;
            this.fileList = []
            this.currPage = 1
        },
        fileRename(item) {
            this.editFilename = item.filename
            item.isEdit = true
        },
        // 面包屑跳转路径
        toFolder(id) {
            if (id == -1) {
                // 若是全部
                this.breadList = [
                    {
                        filename: "全部",
                        id: -1
                    }
                ]
                this.$router.push({
                    path: this.$route.path,
                    query: {
                        category: this.$route.query.category
                    }
                })
            }
            else {
                // 不是全部
                var path = this.$route.query.path
                var routerPath = "/" + id
                this.$router.push({
                    path: this.$route.path,
                    query: {
                        category: this.$route.query.category,
                        path: path.substring(0, path.indexOf(routerPath) + routerPath.length)
                    }
                })
                let flag = true
                this.breadList = this.breadList.filter(item => {
                    if (item.id == id) {
                        flag = false
                        return true;
                    }
                    return flag;
                })
            }
        },
        // 下载文件
        download(data) {
            this.$bus.$emit("busDownloadParams", data)
        },
        showShare(item) {
            this.isShare = true
            this.shareFile = item
        },
        handleClose(done) {
            done()
            // 关闭分享界面的响应后界面
            setTimeout(() => {
                this.$bus.$emit("busCloseMyShare")
            }, 400);
        },
        async setPublicFile(item) {
            let res = await this.$store.dispatch("saveFolder", {
                publicType: 2,
                id: item.id
            })
            if (res.success) {
                this.$message.success(res.message)
                this.clearFileList()
                this.getFolderList()
            }
            else this.$global.resError(res)
        },
        // 展示移动页面
        move(item) {
            this.moveFile = item
            this.t = Date.now()
            this.isMove = true
        },
        // 展示添加关键词页面
        async addTag(id) {
            this.addTagFileId = id
            let res = await this.$store.dispatch('getFileTag', id)
            if (res.success) {
                this.fileTagList = res.data.map(item => item.name)
                this.isAddTag = true
            }
            else this.$global.resError(res)
        },
        // 保存文件标签
        async saveFileTag() {
            if (this.fileList.length == 0) {
                this.$message.warning("请正确输入")
                return
            }
            let res = await this.$store.dispatch('saveFileTag', {
                fileId: this.addTagFileId,
                names: this.fileTagList
            })
            if (res.success) {
                this.$message.success(res.message)
                this.fileTagList = res.data.map(item => item.name)
            }
            else this.$global.resError(res)
        }
    },
    watch: {
        '$route.query': function (newVal, oldVal) {
            this.clearFileList()
            this.getFolderList()
        },
        '$route.query.category': function (newVal, oldVal) {
            // 清空面包屑
            this.breadList = [{
                filename: "全部",
                id: -1
            }]
        },
    },
    beforeDestroy() {
        this.$bus.$off('refreshFileList')
    }
}
</script>

<style scoped>
.home {
    width: 100%;
}

.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-btn {
    margin: 0 15px;
}

::v-deep .clearfix span {
    font-weight: 700;
    font-size: 14px
}

.table-more {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.table-more-item {
    cursor: pointer;
    font-size: 16px;
    color: #409EFF;
}

.filename {
    display: flex;
    align-items: center;
}

.flex {
    display: flex;
    align-items: center;
}

.just {
    justify-content: space-around;
}

.bread {
    margin-bottom: 10px;
}

::v-deep .el-breadcrumb__inner {
    cursor: pointer !important;
}

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
</style>